<template>
  <v-form ref="form" class="form py-5 px-6">
    <v-row no-gutters class="line">
      <v-col class="label" cols="3">Location Code</v-col>
      <v-col class="text-left" cols="8">
        <v-card flat width="40%">
          <v-text-field
            v-model="formData.locationCode"
            v-validate="'required'"
            name="Location Code"
            class="white-input"
            solo
            dense
            hide-details
          ></v-text-field>
        </v-card>
        <span class="vee-validate-error">
          {{ errors.first("Location Code") }}
        </span>
      </v-col>
    </v-row>
    <v-row no-gutters class="line">
      <v-col class="label" cols="3">Parent Location</v-col>
      <v-col class="text-left" cols="8">
        <v-text-field
          v-model="formData.parentLocation"
          v-validate="'required'"
          name="Parent Location"
          class="white-input"
          solo
          dense
          hide-details
        ></v-text-field>
        <span class="vee-validate-error">
          {{ errors.first("Parent Location") }}
        </span>
      </v-col>
    </v-row>
    <v-row no-gutters class="line align-start">
      <v-col class="label" cols="3">Address</v-col>
      <v-col class="text-left" cols="8">
        <v-textarea
          v-model="formData.address"
          v-validate="'required'"
          name="Address"
          class="white-input"
          solo
          hide-details
          no-resize
        ></v-textarea>
        <span class="vee-validate-error">
          {{ errors.first("Address") }}
        </span>
      </v-col>
      <v-col class="flex-grow-0 ml-2 end">
        <v-icon>mdi-map-marker</v-icon>
      </v-col>
    </v-row>
    <v-row no-gutters class="align-start">
      <v-col cols="6">
        <v-row no-gutters class="line">
          <v-col class="label" cols="6">Country</v-col>
          <v-col class="text-left">
            <v-select
              v-model="formData.country"
              v-validate="'required'"
              name="Country"
              :items="items"
              solo
              class="white-input"
              dense
              hide-details
            ></v-select>
            <span class="vee-validate-error">
              {{ errors.first("Country") }}
            </span>
          </v-col>
        </v-row>
        <v-row no-gutters class="line">
          <v-col class="label" cols="6">District</v-col>
          <v-col class="text-left">
            <v-select
              v-model="formData.district"
              v-validate="'required'"
              name="District"
              :items="items"
              solo
              class="white-input"
              dense
              hide-details
            ></v-select>
            <span class="vee-validate-error">
              {{ errors.first("District") }}
            </span>
          </v-col>
        </v-row>
        <v-row no-gutters class="line">
          <v-col class="label" cols="6">Area</v-col>
          <v-col class="text-left">
            <v-select
              v-model="formData.area"
              v-validate="'required'"
              name="Area"
              :items="items"
              solo
              class="white-input"
              dense
              hide-details
            ></v-select>
            <span class="vee-validate-error">
              {{ errors.first("Area") }}
            </span>
          </v-col>
        </v-row>
      </v-col>
      <v-col cols="4" offset="1">
        <v-card flat max-width="192" height="160" color="grey"></v-card>
      </v-col>
    </v-row>
  </v-form>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import VForm from "vuetify/src/components/VForm/index";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import { IAddress } from "@/components/Customer/index";
@Component({
  components: {
    Dialog,
  },
})
export default class AddEditAddress extends Vue {
  formData = {
    id: "",
    locationCode: "",
    parentLocation: "",
    address: "",
    country: "",
    district: "",
    area: "",
  };
  items = ["Foo", "Bar", "Fizz", "Buzz"];

  resetForm() {
    this.formData.id = "";
    type VFormInstance = InstanceType<typeof VForm>;
    const formRef = this.$refs.form as VFormInstance;
    formRef.reset();
  }

  setFormData(formData: object) {
    Object.assign(this.formData, formData);
  }

  async validateFormData() {
    const valid: boolean = await this.$validator.validate();
    if (valid) {
      return this.getFormData();
    } else {
      return false;
    }
  }

  getFormData(): IAddress {
    return JSON.parse(JSON.stringify(this.formData));
  }
}
</script>
<style lang="scss" scoped>
@import "@/components/Maintenance/Dialog/DialogForm.scss";
</style>
